<template>
  <el-container class="main_con">
    <div class="list_con nomt nopt">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础页面" name="a">
          <div class="list">
            <div class="item" v-for="(item, i) in list">
              <div class="item_head">
                <span>{{ item.name }}</span>
                <div class="icon_div">
                  <!-- <div><i class="el-sc-lianjie"></i></div> -->
                  <!-- <div @click="edit(item)"><i class="el-sc-iconfontedit"></i></div> -->
                </div>
              </div>
              <div class="content">
                <p>小程序链接：{{ item.path }}</p>
                <p>公众号链接：{{ url + '/h5/#/' + item.path }}?mall_id={{ mall_id }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单页面" name="b">
          <div class="list">
            <div class="item" v-for="(item, i) in orderlist">
              <div class="item_head">
                <span>{{ item.name }}</span>
                <div class="icon_div">
                  <!-- <div><i class="el-sc-lianjie"></i></div> -->
                  <!-- <div @click="edit(item)"><i class="el-sc-iconfontedit"></i></div> -->
                </div>
              </div>
              <div class="content">
                <p>小程序链接：{{ item.path }}</p>
                <p>公众号链接：{{ url + '/h5/#/' + item.path }}?mall_id={{ mall_id }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="营销页面" name="c">
          <div class="list">
            <div class="item" v-for="(item, i) in agentlist">
              <div class="item_head">
                <span>{{ item.name }}</span>
                <div class="icon_div">
                  <!-- <div><i class="el-sc-lianjie"></i></div> -->
                  <!-- <div @click="edit(item)"><i class="el-sc-iconfontedit"></i></div> -->
                </div>
              </div>
              <div class="content">
                <p>小程序链接：{{ item.path }}</p>
                <p>公众号链接：{{ url + '/h5/#/' + item.path }}?mall_id={{ mall_id }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="插件页面" name="d"></el-tab-pane> -->
        <el-tab-pane label="自定义页面" name="e">
          <div class="list">
            <div class="item" v-for="(item, i) in custom_list">
              <div class="item_head">
                <span>{{ item.name }}</span>
                <div class="icon_div">
                  <!-- <div><i class="el-sc-lianjie"></i></div> -->
                  <!-- <div @click="edit(item)"><i class="el-sc-iconfontedit"></i></div> -->
                </div>
              </div>
              <div class="content">
                <p>小程序链接： pages/custompage/custompage?id={{ item.id }}</p>
                <p>公众号链接：{{ url }}'/h5/#/pages/custompage/custompage?id={{ item.id }}&&mall_id={{ mall_id }}</p>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    <el-dialog :visible.sync="dialogVisible" :show-close="false">
      <div slot="title" class="dia_title">
        <span>修改参数</span>0
        <div>
          <div class="icon_div"><i class="el-sc-lianjie"></i></div>
          <span>完成</span>
        </div>
      </div>
      <div>
        <p>路径：{{ item.path }}</p>
        <div>
          <span>参数：</span>
          <el-input v-model="item.params"></el-input>
        </div>
      </div>
    </el-dialog> -->
  </el-container>
</template>

<script>
import {pageList} from '@/api/mall/dndlist';
export default {
  data() {
    return {
      activeName: 'a',
      dialogVisible: false,
      url: '',
      custom_page: 1,
      mall_id: '',
      list: [
        {path: 'pages/index/index', name: '首页', params: ''},
        {path: 'pages/mine/mine', name: '个人中心', params: ''},
        {path: 'pages/mine/editinfo', name: '用户信息', params: ''},
        // {path: 'pages/detail/detail', name: '商品详情', params: ''},
        {path: 'pages/list/list', name: '商品列表', params: ''},
        {path: 'pages/cart/cart', name: '购物车', params: ''},
        {path: 'pages/mine/address/index', name: '地址列表', params: ''},
        // {path: 'pages/mine/address/detail', name: '地址详情', params: ''},
        {path: 'pages/list/searchindex', name: '搜索', params: ''},
        {path: 'pages/mine/storelist/storelist', name: '门店列表', params: ''},
        {path: 'pages/evaluate/evaluate', name: '评价列表', params: ''},
        {path: 'pages/merchant/merchant', name: '商户', params: ''},
        {path: 'pages/categoryList/categoryList', name: '分类', params: ''},
        {path: 'pages/accept/accept', name: '店员核销', params: ''},
        {path: 'pages/accept/index', name: '核销中心', params: ''},
        {path: 'pages/conpon/conpon', name: '我的优惠卷', params: ''},
        // {path: 'pages/conpon/detail', name: '优惠券详情', params: ''},
        {path: 'pages/conpon/receive', name: '领取优惠券', params: ''},
        {path: 'pages/recharge/recharge', name: '余额', params: ''},
        {path: 'pages/mine/integral/integral', name: '积分明细', params: ''},
        {path: 'pages/article/article', name: '文章列表', params: ''},
        {path: 'pages/mine/bindmobile/bindmobile', name: '绑定手机/换绑手机', params: ''},
        // {path: 'pages/article/detail', name: '文章详情', params: ''},
        // {path: 'pages/noticedetail/noticedetail', name: '公告详情', params: ''},
        {path: 'pages/merchant/apply', name: '商户申请', params: ''},
        {path: 'pages/merchant/index', name: '商户中心', params: ''},
        {path: 'pages/mine/card/card', name: '绑定账号', params: ''},
        {
          path: 'pages/mine/collect/collect',
          name: '我的收藏',
          params: ''
        },
        {path: 'pages/mine/balance/balance', name: '余额明细', params: ''},
        {path: 'pages/mine/balance/withdraw', name: '余额提现', params: ''},
        {path: 'pages/customer/customer', name: '腾讯智服', params: ''},
        {path: 'pages/contactus/contactus', name: '联系我们', params: ''},
        // {path: 'pages/closepage/closepage', name: '停业中', params: ''},
        {path: 'pages/accept/list', name: '核销记录', params: ''},
        // {path: 'pages/mine/invoice/detail', name: '申请开票', params: ''},
        // {path: 'pages/mine/invoice/invoice', name: '我的抬头', params: ''},
        // {path: 'pages/mine/invoice/addinvoice', name: '添加抬头', params: ''},
        {path: 'pages/mine/invoice/myinvoice', name: '我的发票', params: ''}
        // {path: 'pages/mine/invoice/invoicecenter', name: '发票中心', params: ''},
        // {path: 'pages/mine/invoice/addinvoice', name: '添加抬头', params: ''}
      ],
      orderlist: [
        // {path: 'orderpage/order/orderdetail', name: '订单详情', params: ''},
        // {path: 'orderpage/order/evaluate', name: '订单评论', params: ''},
        {path: 'orderpage/order/list', name: '订单中心', params: ''},
        // {path: 'orderpage/order/logistics', name: '物流信息', params: ''},
        // {path: 'orderpage/order/pay', name: '订单支付', params: ''},
        // {path: 'orderpage/order/aftersale', name: '申请售后', params: ''},
        // {path: 'orderpage/order/aftersale_submit', name: '申请售后', params: ''},
        // {path: 'orderpage/order/aftersale_detail', name: '售后详情', params: ''},
        // {path: 'orderpage/order/afterpa', name: '支付结果', params: ''},
        // {path: 'orderpage/order/invoice', name: '发票', params: ''}
      ],
      agentlist: [
        {
          path: 'agentpage/agent/index',
          name: '分销中心',
          params: ''
        },
        {
          path: 'agentpage/agent/apply',
          name: '申请分销',

          params: ''
        },
        {
          path: 'agentpage/agent/list',
          name: '分销团队',
          params: ''
        },
        {
          path: 'agentpage/agent/withdrawlist',
          name: '分销提现列表',
          params: ''
        },
        {
          path: 'agentpage/agent/withdrawdetail',
          name: '分销提现',
          params: ''
        },
        {
          path: 'agentpage/agent/order',
          name: '分销订单',
          params: ''
        },
        {
          path: 'marketpage/marketing/signin',
          name: '签到',
          params: ''
        },
        {
          path: 'marketpage/prize/index',
          name: '抽奖',
          params: ''
        },
        {
          path: 'marketpage/prize/list',
          name: '中奖列表',
          params: ''
        }
      ],
      custom_list: []
    };
  },
  mounted() {
    this.url = window.location.origin;
    this.mall_id = localStorage.getItem('mall_id');
    this.pageList();
  },
  methods: {
    edit(data) {
      this.dialogVisible = true;
    },
    //获取自定义页面
    pageList() {
      let params = {
        page: 1,
        size: 100,
        status: 2,
        page_type: 4
      };
      pageList(params, this.custom_page, 10).then(res => {
        this.custom_list = res.msg.data;
        this.custom_total = res.msg.total;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  color: #515a6e;
  .item {
    width: calc(33% - 30px);
    margin: 15px;
    display: flex;
    flex-direction: column;
    border: 1px solid #f1f1f1;
    .item_head {
      display: flex;
      justify-content: space-between;
      height: 53px;
      background: #fafafa;
      align-items: center;
      padding: 0 20px;
      .icon_div {
        display: flex;
        align-items: center;
        cursor: pointer;
        div {
          width: 31px;
          height: 31px;
          background: #e8effb;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #2e68ea;
          margin-left: 20px;
        }
      }
    }
    .content {
      p {
        margin-left: 20px;
      }
    }
  }
}
.dia_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    display: flex;
    align-items: center;
    .icon_div {
      width: 31px;
      height: 31px;
      // background: #e8effb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2e68ea;
      margin-right: 20px;
    }
    > span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2e68ea;
    }
  }
}
</style>
